<template>
	<view>
		<u-navbar :border-bottom="false" title="斗破苍穹" :title-bold="true" title-color="#000000" :background="background">
			<view slot="right" style="padding-right: 30rpx;">
				<u-icon name="download" size="40" style="padding-right: 30rpx;"></u-icon>
				<u-icon custom-prefix="icon-book" name="jiarushujia" size="40" style="padding-right: 30rpx;"></u-icon>
				<u-icon name="more-dot-fill" size="40"></u-icon>
				<!-- <u-icon name="bookmark" size="38" style="padding-right: 20rpx;"></u-icon>
				<u-icon name="share" size="38"></u-icon> -->
			</view>
		</u-navbar>
		<view class="u-padding-30">
			<view style="font-size:50rpx;font-weight: bold;">第一章 陨落的天才</view>
			<view @click="click">
				<u-parse style="padding-top: 20rpx;" :style="{'font-size':size}" :show-with-animation="true" :html="text" :selectable="true"></u-parse>
			</view>
		</view>
		<!-- 目录 -->
		<u-popup v-model="sidebar" width="550rpx" :safe-area-inset-bottom="false" z-index="999">
			<view class="wrap u-border-bottom">
				<view class="title">斗破苍穹</view>
				<view class="author">天蚕土豆</view>
				<view class="u-flex">
					<view class="status u-row-left">连载至 第一章 我是你爹</view>
					<view style="position: absolute;right:30rpx;">
						<u-icon custom-prefix="icon-book" name="daoxu" size="30" color="#2979ff"></u-icon>
					</view>
				</view>
			</view>
			<u-subsection :list="list" :current="current" style="border-radius: 0px;" @change="tabcurrent"></u-subsection>
			<view v-if="current == 0">
				<mescroll-uni height="600px" @init="mescrollInit" :down="downOption" :up="upOption">
					<view style="padding:25rpx 30rpx;" v-for="item in 20">
						<text style="font-size:28rpx;font-weight: bold;color:#606266;">第{{item}}章 陨落的天才</text>
						<text style="position:absolute;right:20rpx;font-size:20rpx;color:#909399;">已下载</text>
					</view>
				</mescroll-uni>
				<view class="u-border-top" style="text-align: center;padding-top: 20rpx;">
					<u-icon name="download" color="#2979ff" size="40" label="下载" label-color="#2979ff" label-size="35"></u-icon>
				</view>
			</view>
			<view v-if="current == 1">
				qwe
			</view>
		</u-popup>
		<!-- 底部菜单 -->
		<u-popup v-model="botton_card" mode="bottom" :mask="false" z-index="998">
			<view class="u-border-top bottom_set"> 
				<view class="title">100% · 第1章 123123123</view>
				<view class="u-flex">
					<view class="u-flex-1 u-padding-left-30 u-padding-right-30">上一章</view>
					<u-slider class="u-flex-5" v-model="value" height="5" active-color="#000000" block-width="35" min="1" max="100"></u-slider>
					<view class="u-flex-1 u-padding-right-30 u-padding-left-30">下一章</view>
				</view>
				<u-grid class="u-padding-top-35 u-padding-bottom-10" :col="3" :border="false">
					<u-grid-item style="background:rgba(0,0, 0, 0);" @click="tabside">
						<u-icon name="list-dot" :size="46"></u-icon>
						<view class="grid-text">目录</view>
					</u-grid-item>
					<u-grid-item style="background:rgba(0,0, 0, 0);">
						<u-icon custom-prefix="icon-book" name="yejian" :size="46"></u-icon>
						<view class="grid-text">夜间</view>
					</u-grid-item>
					<u-grid-item style="background:rgba(0,0, 0, 0);" @click="tabsetting">
						<u-icon name="setting" :size="46"></u-icon>
						<view class="grid-text">设置</view>
					</u-grid-item>
				</u-grid>
			</view>
		</u-popup>
		<!-- <view v-model="botton_card" class="u-border-top bottom_set" @touchmove.stop.prevent="" style="animation-duration:0.2s;"
			:class="botton_card?'animation-catalog-bottom':'animation-reverse animation-slide-bottom'">
			<view class="tabbar_bottom">
				<view class="title">100% · 第1章 123123123</view>
				<view class="u-flex">
					<view class="u-flex-1 u-padding-left-30 u-padding-right-30">上一章</view>
					<u-slider class="u-flex-5" v-model="value" height="5" active-color="#000000" block-width="35" min="1" max="100"></u-slider>
					<view class="u-flex-1 u-padding-right-30 u-padding-left-30">下一章</view>
				</view>
				<u-grid class="u-padding-top-40" :col="4" :border="false">
					<u-grid-item style="background:rgba(0,0, 0, 0);" @click="tabside">
						<u-icon name="list-dot" :size="46"></u-icon>
						<view class="grid-text">目录</view>
					</u-grid-item>
					<u-grid-item style="background:rgba(0,0, 0, 0);">
						<u-icon custom-prefix="icon-book" name="yejian" :size="46"></u-icon>
						<view class="grid-text">夜间</view>
					</u-grid-item>
					<u-grid-item style="background:rgba(0,0, 0, 0);">
						<u-icon name="setting" :size="46"></u-icon>
						<view class="grid-text">设置</view>
					</u-grid-item>
					<u-grid-item style="background:rgba(0,0, 0, 0);">
						<u-icon name="more-circle" :size="46"></u-icon>
						<view class="grid-text">更多</view>
					</u-grid-item>
				</u-grid>
			</view> -->
		<!-- </view> -->
		
		<!-- 设置 -->
		<u-popup v-model="setting" mode="bottom" :mask="false" z-index="999">
			<view class="u-border-top tabbar_bottoms" style="background-color: #fffae8;">
				<view class="u-flex u-padding-top-40">
					<view class="u-padding-left-40">亮度</view>
					<view class="u-padding-left-55">
						<u-slider style="width: 350rpx;" v-model="value" height="5" block-color="#000000" active-color="#000000" block-width="35" min="1" max="100"></u-slider>
					</view>
				</view>
				<view class="u-flex u-padding-top-40">
					<view class="u-padding-left-40">字号</view>
					<u-button type="primary" size="medium" :plain="false" :hair-line="true" hover-class="none" style="background-color:#F2F2F2;">
						<u-icon custom-prefix="icon-book" name="zitisuoxiao" size="35" color="#000000"></u-icon>
					</u-button>
					<view>35</view>
					<u-button type="primary" size="medium" :plain="false" :hair-line="true" hover-class="none" style="background-color:#F2F2F2;">
						<u-icon custom-prefix="icon-book" name="zitifangda" size="35" color="#000000"></u-icon>
					</u-button>
				</view>
				<view class="u-flex u-padding-top-40">
					<view class="u-padding-left-40">主题</view>
					<!-- <u-avatar bg-color="#000000"></u-avatar> -->
					<view class="u-flex u-padding-left-55">
						<view class="theme u-margin-right-55" style="background-color:#ffffff;"></view>
						<view class="theme u-margin-right-55 theme_avtive" style="background-color:#fffae8;"></view>
						<view class="theme u-margin-right-55" style="background-color:#EBE2CE;"></view>
						<view class="theme u-margin-right-55" style="background-color:#000000;"></view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 菜单 -->
		<u-popup v-model="menu" mode="bottom" z-index="999" border-radius="28" height="550">
			<u-grid class="u-padding-top-25 u-padding-bottom-10" :col="4" :border="false">
				<u-grid-item style="background:rgba(0,0, 0, 0);" @click="tabside">
					<u-avatar bg-color="#f3f4f6" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1748204858,3311308006&fm=26&gp=0.jpg"></u-avatar>
					<view class="grid-text">目录</view>
				</u-grid-item>
				<u-grid-item style="background:rgba(0,0, 0, 0);">
					<u-avatar bg-color="#f3f4f6" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F10516809855%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612603881&t=a23cc4b8760aa2f7fa8ebfe01d2e4fa2"></u-avatar>
					<view class="grid-text">夜间</view>
				</u-grid-item>
				<u-grid-item style="background:rgba(0,0, 0, 0);" @click="tabsetting">
					<u-icon name="setting" :size="46"></u-icon>
					<view class="grid-text">设置</view>
				</u-grid-item>
			</u-grid>
		</u-popup>
		<!-- <u-mask :show="true" :mask-click-able="true" @click="able"></u-mask> -->
		<!-- <view v-model="setting" class="u-border-top bottom_set" @touchmove.stop.prevent="" style="animation-duration:0.2s;"
			:class="setting?'animation-catalog-bottom':'animation-reverse animation-slide-bottom'">
			<view class="tabbar_bottom">
				
			</view>
		</view> -->
		<!-- <u-mask :show="true" :mask-click-able="true" @click="able"></u-mask> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use : false
				},
				upOption: {
					use : false
				},
				background:{
					backgroundColor: '#fffae8'
				},
				value: 30,
				size: '35rpx',
				botton_card:false,
				sidebar: false,
				list: [
					{
						name:'目录'
					},
					{
						name:'书签'
					}
				],
				current:0,
				setting:false,
				menu:true,
				text: `&nbsp;&nbsp;“斗之力，三段”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“萧炎，斗之力，三段级别：低级”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“三段嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“哎，这废物真是把家族的脸都给丢光了。”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，哪还有机会待在家族中白吃白喝。”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳中，恍如一根根利刺狠狠的扎在心脏一般，让得少年呼吸微微急促武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;少年缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过，少年嘴角的自嘲，似乎变得更加苦涩了武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“这些人，都如此刻薄势力吗或许是因为三年前他们曾经在自己面前露出过最谦卑的笑容，所以，如今想要讨还回去吧”苦涩的一笑，萧炎落寞的转身，安静的回到了队伍的最后一排，孤单的身影，与周围的世界，有些格格不入武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“下一个，萧媚”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;听着测验人的喊声，一名少女快速的人群中跑出，少女刚刚出场，附近的议论声便是小了许多，一双双略微火热的目光，牢牢的锁定着少女的脸颊
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;少女年龄不过十四左右，虽然并算不上绝色，不过那张稚气未脱的小脸，却是蕴含着淡淡的妩媚，清纯与妩媚，矛盾的集合，让得她成功的成为了全场瞩目的焦点
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;少女快步上前，小手轻车熟路的触摸着漆黑的魔石碑，然后缓缓闭上眼睛
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;在少女闭眼片刻之后，漆黑的魔石碑之上再次亮起了光芒
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“斗之气：七段”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“萧媚，斗之气：七段级别:高级”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“耶”听着测验员所喊出的成绩，少女脸颊扬起了得意的笑容
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“啧啧，七段斗之气，真了不起，按这进度，恐怕顶多只需要三年时间，她就能称为一名真正的斗者了吧”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“不愧是家族中种子级别的人物啊”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;听着人群中传来的一阵阵羡慕声，少女脸颊上的笑容更是多了几分，虚荣心，这是很多女孩都无法抗拒的诱惑
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;与平日里的几个姐妹互相笑谈着，萧媚的视线，忽然的透过周围的人群，停在了人群外的那一道孤单身影上
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;皱眉思虑了瞬间，萧媚还是打消了过去的念头，现在的两人，已经不在同一个阶层之上，以萧炎最近几年的表现，成年后，顶多只能作为家族中的下层人员，而天赋优秀的她，则将会成为家族重点培养的强者，前途可以说是不可限量武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“唉”莫名的轻叹了一口气，萧媚脑中忽然浮现出三年前那意气风发的少年，四岁练气，十岁拥有九段斗之气，十一岁突破十段斗之气，成功凝聚斗之气旋，一跃成为家族百年之内最年轻的斗者
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;当初的少年，自信而且潜力无可估量，不知让得多少少女对其春心荡漾，当然，这也包括以前的萧媚武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;然而天才的道路，貌似总是曲折的，三年之前，这名声望达到巅峰的天才少年，却是突兀的接受到了有生以来最残酷的打击，不仅辛辛苦苦修炼十数载方才凝聚的斗之气旋，一夜之间，化为乌有，而且体内的斗之气，也是随着时间的流逝，变得诡异的越来越少武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;斗之气消失的直接结果，便是导致其实力不断的后退武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;从天才的神坛，一夜跌落到了连普通人都不如的地步，这种打击，让得少年从此失魂落魄，天才之名，也是逐渐的被不屑与嘲讽所替代武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;站的越高，摔得越狠，这次的跌落，或许就再也没有爬起的机会武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“下一个，萧薰儿”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;喧闹的人群中，测试员的声音，再次响了起来武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;随着这有些清雅的名字响起，人群忽然的安静了下来，所有的视线，豁然转移武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;在众人视线汇聚之处，一位身着紫色衣裙的少女，正淡雅的站立，平静的稚嫩俏脸，并未因为众人的注目而改变分毫武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;少女清冷淡然的气质，犹如清莲初绽，小小年纪，却已初具脱俗气质，难以想象，日后若是长大，少女将会如何的倾国倾城
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;这名紫裙少女，论起美貌与气质来，比先前的萧媚，无疑还要更胜上几分，也难怪在场的众人都是这般动作武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;莲步微移，名为萧薰儿的少女行到魔石碑之前，小手伸出，镶着黑金丝的紫袖滑落而下，露出一截雪白娇嫩的皓腕，然后轻触着石碑
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;微微沉静，石碑之上，刺眼的光芒再次绽放武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“斗之气：九段级别：高级”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;望着石碑之上的字体，场中陷入了一阵寂静武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“竟然到九段了，真是恐怖家族中年轻一辈的第一人，恐怕非薰儿小姐莫属了。”寂静过后，周围的少年，都是不由自主的咽了一口唾沫，眼神充满敬畏
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;斗之气，每位斗者的必经之路，初阶斗之气分一至十段，当体内斗之气到达十段之时，便能凝聚斗之气旋，成为一名受人尊重的斗者
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;人群中，萧媚皱着浅眉盯着石碑前的紫裙少女，脸颊上闪过一抹嫉妒
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;望着石碑上的信息，一旁的中年测验员漠然的脸庞上竟然也是罕见的露出了一丝笑意，对着少女略微恭声道：“薰儿小姐，半年之后，你应该便能凝聚斗气之旋，如果你成功的话，那么以十四岁年龄成为一名真正的斗者，你是萧家百年内的第二人”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;是的，第二人，那位第一人，便是褪去了天才光环的萧炎武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“谢谢。”少女微微点了点头，平淡的小脸并未因为他的夸奖而出现喜悦，安静的回转过身，然后在众人炽热的注目中，缓缓的行到了人群最后面的那颓废少年面前
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“萧炎哥哥。”在经过少年身旁时，少女顿下了脚步，对着萧炎恭敬的弯了弯腰，美丽的俏脸上，居然露出了让周围少女为之嫉妒的清雅笑容武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“我现在还有资格让你怎么叫么”望着面前这颗已经成长为家族中最璀璨的明珠，萧炎苦涩的道，她是在自己落魄后，极为少数还对自己依旧保持着尊敬的人武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“萧炎哥哥，以前你曾经与薰儿说过，要能放下，才能拿起，提放自如，是自在人”萧薰儿微笑着柔声道，略微稚嫩的嗓音，却是暖人心肺武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“呵呵，自在人我也只会说而已，你看我现在的模样，象自在人吗而且这世界，本来就不属于我。”萧炎自嘲的一笑，意兴阑珊的道武动乾坤。
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;面对着萧炎的颓废，萧薰儿纤细的眉毛微微皱了皱，认真的道：“萧炎哥哥，虽然并不知道你究竟是怎么回事，不过，薰儿相信，你会重新站起来，取回属于你的荣耀与尊严”话到此处，微顿了顿，少女白皙的俏脸，头一次露出淡淡的绯红：“当年的萧炎哥哥，的确很吸引人”
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;“呵呵”面对着少女毫不掩饰的坦率话语，少年尴尬的笑了一声，可却未再说什么，人不风流枉少年，可现在的他，实在没这资格与心情，落寞的回转过身，对着广场之外缓缓行去
						<br />
						<br />&nbsp;&nbsp;&nbsp;&nbsp;站在原地望着少年那恍如与世隔绝的孤独背影，萧薰儿踌躇了一会，然后在身后一干嫉妒的狼嚎声中，快步追了上去，与少年并肩而行<br /><br />`
			}
		},
		onPageScroll(res) {
			if(this.botton_card){
				this.botton_card = false;
			}
		},
		methods:{
			click(){
				this.botton_card = !this.botton_card;
			},
			able(){
				console.log('点击了遮罩层')
			},
			tabside(){
				this.sidebar = !this.sidebar;
				this.botton_card = false;
			},
			tabcurrent(e){
				this.current = e
			},
			tabsetting(){
				this.setting = !this.setting;
			}
		}
	}
</script>

<style>
	page {
		background-color: #fffae8;
	}
</style>
<style scoped lang="scss">
	.tabbar_bottoms {
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}  
	.theme {
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
	}
	.theme_avtive {
		border-style:solid;
		// border-color:#82848a;
		border-color:#000000;
		border-width:2rpx;
	}
	.bottom_set {
		height: auto;
		background-color: #fffae9;
		.title {
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			color: #606266;
		}
	}
	
	.wrap {
		padding-top: calc(var(--status-bar-height) + 5px);
		padding-left: 30rpx;
		padding-bottom: 20rpx;
		.title {
			font-size:30rpx;
			font-weight: bold;
		}
		.author {
			font-size:25rpx;
			color: #606266;
		}
		.status {
			font-size:25rpx;
			color: #909399;
		}
	}
</style>
